<template>
  <div class="top-box">
    <div class="above-box">
      <div class="search-box box-shadow">
        <a-form
            layout="inline">
          <a-form-item label="统计范围">
            <a-select placeholder="全部" v-model:value="EnergyQueryFormState.sectionId">
              <a-select-option :value="null" key="0">全部</a-select-option>
              <a-select-option
                  v-for="section in sections"
                  :key="section.sectionId" :value="section.sectionId" >
                {{section.sectionName}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item >
            <a-button type="primary" @click="getEnergyOfSection">查询</a-button>
          </a-form-item>
        </a-form>
        <div class="explain-box" >
          <a-tooltip  placement="left" >
            <template #title>- 全部总量：账号权限内所有标段的水电消耗数据；
             <br> - 标段总量：所选标段所有水电消耗数据；
             <br>  - 按日分析：每日水电消耗数据；
             <br> - 按月分析：每月水电消耗数据；</template>
            <QuestionCircleOutlined />
          </a-tooltip>
        </div>
      </div>
      <div class="above-content">
        <div class="above-content-top ">
<!--    用电量-->
          <div class="above-content-top-left box-shadow" style="position:relative">
            <span>用电总量</span>
            <a-image
                style="width:150px;height:150px;position:absolute;top:40px;left:30px ;border-radius:50%;border: 2px solid #2D99FF;"
                :src="power"  :preview="false" />
            <span
                style="width: 200px;color:#333333;font-family: MicrosoftYaHei;font-size:12px;position:absolute;top:20px;left:590px ;">
              更新时间:{{ refreshTime }} </span>
              <span style="width: 96px;height: 22px;font-size: 24px;
          font-weight: 400;color: #1677FF;line-height: 22px;position:absolute;top:80px;left:450px ">用电总量 </span>
              <span style="width: 248px;height: 22px;font-size: 60px;font-weight: 600;color: #1677FF;line-height: 22px;
          position:absolute;top:140px;left:450px">
             {{ powerConsum}}KWh</span>

          </div>
<!--   用水量-->
          <div class="above-content-top-right box-shadow" style="position:relative">
            <span>用水总量</span>
            <a-image :width="250" :height="250" style="position:absolute;top:20px;" :src="warter" :preview="false"/>
            <span
                style="width: 200px;color:#333333;font-family: MicrosoftYaHei;font-size:12px;position:absolute;top:20px;left:590px ;">
              更新时间:{{ refreshTime }} </span>
            <span style="width: 96px;height: 22px;font-size: 24px;
          font-weight: 400;color: #1677FF;line-height: 22px;position:absolute;top:80px;left:450px ">用水总量 </span>
            <span style="width: 248px;height: 22px;font-size: 60px;font-weight: 600;color: #1677FF;line-height: 22px;
          position:absolute;top:140px;left:450px">
              {{ waterConsum }}m³</span>
          </div>
        </div>
        <div class="above-content-below box-shadow">
       <span>能耗分析</span>
          <a-tabs v-model:activeKey="activeKey"  >
            <a-tab-pane key="1" tab="按日" >
              <vue-echarts :option="dateOption"  style="width:1460px;height: 300px" ref="chart"/>
            </a-tab-pane>

            <a-tab-pane key="2" tab="按月" >
              <vue-echarts :option="monthOption"  style="width:1400px;height: 300px" ref="chart"/>
            </a-tab-pane>

            <template #tabBarExtraContent >
              <span>统计周期： </span>
              <a-range-picker
                  v-show="activeKey==1"
                  v-model:value="dailytime"
                  :ranges="ranges"
              />
              <a-range-picker
                  v-show="activeKey==2"
                  v-model:value="monthtime"
                  :mode="mode2"
                  @panelChange="handlePanelChange"
                  @change="handleChange"
                  format="YYYY-MM"
              />
            </template>
          </a-tabs>
          <br>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, onMounted,  watch} from "vue";
import moment, { Moment } from 'moment';
import {useStore} from "vuex";
import power from "@/assets/image/power.gif";
import warter from "@/assets/image/warter.gif";
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { VueEcharts } from 'vue3-echarts';
import axios from "@/utils/axios";
import {message} from "ant-design-vue";

export default defineComponent({

  setup(){
    const store = useStore()
    const sections = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserSection"])))
    const energyList = ref()
    const waterConsum:any=ref(0)
    const powerConsum:any=ref(0)
    const refreshTime:any=ref()
    const dateOption: any = ref(null);
    const monthOption: any = ref(null);
    const dailytime= ref<Moment[]>([moment().startOf("day").subtract(1, "weeks"), moment()])
    const monthtime= ref<Moment[]>([moment() ,moment()])
    const mode2 = ref<string[]>(['month', 'month']);
    const activeKey= ref('1');
    const handleChange = (val: Moment[]) => {
      monthtime.value = val;
    };

    const handlePanelChange = (val: Moment[], mode: string[]) => {
          monthtime.value = val;
          mode2.value = [
            mode[0] === 'date' ? 'month' : mode[0],
            mode[1] === 'date' ? 'month' : mode[1],
          ];}

    class EnergyQueryForm {
      sectionId: number | undefined = undefined
      startTime:  string | undefined
      endTime:  string | undefined
    }
    const EnergyQueryFormState = ref(new EnergyQueryForm())

    const getEnergyOfSection = ()=>{
       let queryParms:any = {}
// 总量查询
       axios.post("/energy/findconsumption",
           {"sectionId":EnergyQueryFormState.value.sectionId}).then((res:any)=>{
         if(res.success){
           powerConsum.value =res.data.powerConsumption;
           waterConsum.value =res.data.waterConsumption;
           refreshTime.value=res.data.dateTime;
         }else{
           powerConsum.value='--';
           waterConsum.value='--'
           message.info("没有查询权限")
         }
       })
// 日期查询

     EnergyQueryFormState.value.startTime =  moment((dailytime.value[0]).toDate()).format('yyyy-MM-DD')
     EnergyQueryFormState.value.endTime = moment((dailytime.value[1]).toDate()).format('yyyy-MM-DD')
      Object.assign(queryParms, EnergyQueryFormState.value)
       axios.post("/energy/findDailyComsumption",
           queryParms).then((res:any)=>{
         if(res.success){
          energyList.value=res.data;
           let jsonTarget:any=[];
          for (let i=0;i<energyList.value.length;i++){
            energyList.value[0].info.map(function(item:any){
              jsonTarget.push({dateTime:item.dateTime,用电:item.powerConsumption,用水:item.waterConsumption});
            })
           }
           dateOption.value = {
                 legend:{ left: 'center'},
                 grid:{
                   bottom:'10%',
                 },
                 tooltip:{},
                 toolbox: {
                   show : true,
                   feature : {
                     saveAsImage: {show: true},

                   }
                 },
                   dataset:{
                   dimensions:['dateTime','用电','用水'],
                   source:jsonTarget
                 },
                 xAxis:{type:'category'},
                 yAxis:{},
                 series: [
                   {type: 'bar', color: '#0455A4',barMaxWidth: 30,
                     itemStyle: {
                       normal: {
                         label: {
                           show: true, //开启显示
                           position: 'top', //在上方显示
                           textStyle: { //数值样式
                             color: '#666666',
                             fontSize: 13
                           }
                         }
                       }
                     } },
                   {type: 'bar', color: '#2D99FF', barMaxWidth: 30,
                     itemStyle: {
                       normal: {
                         label: {
                           show: true, //开启显示
                           position: 'top', //在上方显示
                           textStyle: { //数值样式
                             color: '#666666',
                             fontSize: 13
                           }
                         }
                       }
                     } }
                 ]
             }

         }else{
           message.info("没有查询权限")
         }
       })
// 月份查询

       EnergyQueryFormState.value.startTime = moment((monthtime.value[0]).toDate()).format('yyyy-MM')
       EnergyQueryFormState.value.endTime = moment((monthtime.value[1]).toDate()).format('yyyy-MM')
      console.log( EnergyQueryFormState.value.startTime,EnergyQueryFormState.value.endTime)
      Object.assign(queryParms, EnergyQueryFormState.value)
       axios.post("/energy/findMonthlyConsumption",
           queryParms).then((res:any)=>{
         if(res.success){
           energyList.value=res.data;
           let jsonTarget:any=[];
           for (let i=0;i<energyList.value.length;i++){
             energyList.value[0].info.map(function(item:any){
               jsonTarget.push({dateTime:item.dateTime,用电:item.powerConsumption,用水:item.waterConsumption});
             })
           }
           monthOption.value = {
             legend:{ left: 'center'},
             grid:{
               bottom:'10%',
             },
             tooltip:{},
             toolbox: {
               show : true,
               feature : {
                 saveAsImage: {show: true},
               }
             },
             dataset:{
               dimensions:['dateTime','用电','用水'],
               source:jsonTarget
             },
             xAxis:{type:'category'},
             yAxis:{},
             series:[
               {type:'bar',color:'#0455A4', barMaxWidth: 30,
                 itemStyle: {
                   normal: {
                     label: {
                       show: true, //开启显示
                       position: 'top', //在上方显示
                       textStyle: { //数值样式
                         color: '#666666',
                         fontSize: 13
                       }
                     }
                   }
                 } },
               {type:'bar',color:'#2D99FF', barMaxWidth: 30,
                 itemStyle: {
                   normal: {
                     label: {
                       show: true, //开启显示
                       position: 'top', //在上方显示
                       textStyle: { //数值样式
                         color: '#666666',
                         fontSize: 13
                       }
                     }
                   }
                 } }
             ]
           }

         }else{
           message.info("没有查询权限")
         }
       })

     }


    watch([dailytime,monthtime],() => {
      console.log('watch')
      getEnergyOfSection()
    }, {immediate: true})

    return{
      sections,
      getEnergyOfSection,
      EnergyQueryFormState,
      energyList,
      waterConsum,
      powerConsum,
      refreshTime,
      warter,
      power,
      dateOption,
      monthOption,
      dailytime,
      monthtime,
      moment,
      mode2,
      handlePanelChange,
      handleChange,

      activeKey,
      ranges: { 近七日: [moment().startOf("day").subtract(1, "weeks"), moment()],
        '本月': [ moment().startOf('month'),moment()] },
    }
  },
  components:{
    VueEcharts,
    QuestionCircleOutlined
  }


})
</script>

<style lang="scss" scoped>
.top-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .above-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .search-box {
      display: flex;
      width: 100%;
      height: 90px;
      align-items: center;
      padding: 0 38px;
      box-sizing: border-box;
      flex-shrink: 0;

      ::v-deep label {
        color: #666;
      }

      ::v-deep .ant-form {
        width: 100%;
      }

      ::v-deep .ant-select {
        width: 196px;
      }
      .explain-box{
        width: 30px;
        height: 40px;
        flex-shrink: 0;
        padding: 10px;
      }
    }

    .above-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;

      .above-content-top {
        flex-direction: row;
        height: 250px;
        margin-top: 20px;
        display: flex;

       //::v-deep .ant-image-img {
       //   width:170px;
       //   height:170px;
       //   position:absolute;
       //  top:30px;left:100px;
       //  border-radius:50%;border: 2px solid #2D99FF;
       // }

        .above-content-top-left {
          display: flex;
          flex: 1;
          padding: 16px 36px;

          > span {
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }

        .above-content-top-right {
          display: flex;
          flex: 1;
          margin-left: 20px;
          padding: 16px 36px;

          > span {
            width: 72px;
            height: 25px;
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 25px;
          }
        }
      }

      .above-content-below {
        height: 100%;
        width: 100%;
        margin-top: 20px;
        padding: 26px 36px 5px;
        flex-direction: column;
        ::v-deep .ant-tabs{
          margin: 10px 0px 0px 30px ;
          width: 1520px;
          display: inline-block;

        }
        ::v-deep .ant-tabs .ant-tabs-top-content{

        }
          >span{
          width: 72px;
          height: 25px;
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #333333;
          line-height: 25px;
        }
      }
    }
  }

  }


</style>
